<template>
    <div>
        <div id="searchId" @click="setupWatcher"
            style="width: 0;height: 0;opacity: 0;position: fixed;overflow: hidden; "></div>
        <div class="show-pc">
            <div style="width: 95.83333333333334vw; margin: 0 auto; margin-top: 3vw ;">
                <Waterfall :col="3" :data-source="list" :show-icon="true" :dataStatus="dataStatus" :loading="loading"
                    ref="WaterfallRef" @openEdit="openEdit" @loadData="loadData" style="margin: 0px;">
                    <template #default="{ item }">
                        <Card :item />
                    </template>
                </Waterfall>
            </div>

        </div>


        <div class="show-wap">
            <div style="padding: 0px 10px;">
                <Waterfall :col="3" :data-source="list" :show-icon="true" :dataStatus="dataStatus" :loading="loading"
                    ref="WaterfallRef" @openEdit="openEdit" @loadData="loadData">
                    <template #default="{ item }">
                        <Card :item />
                    </template>
                </Waterfall>
            </div>
        </div>
        <UploadWorks ref="UploadWorksRef" @editOk="editOk" @delOk="delOk"></UploadWorks>
    </div>
</template>

<script setup>
import { ref, onMounted, } from 'vue'
import Waterfall from '@/components/Waterfall/index.vue'
import { useRoute } from 'vue-router';
import { useHttp } from '@/api/http'
import UploadWorks from '@/components/uploadWorks/index.vue';
import { getSearchText } from '@/utils/cache'
import { useStore } from '@/store'
const route = useRoute();
const { themeStore } = useStore()

const list = ref([])
const queryParams = ref({
    pageNo: 1,
    pageSize: 15,
    
})
const UploadWorksRef = ref(null)
const WaterfallRef = ref(null)
const dataStatus = ref(true)
const loading = ref(false)




// 路由id
const routeData = ref('')
onMounted(() => {
    routeData.value = route.params.id
  
    if (route.query.keyWord) {
        queryParams.value.keyWord = route.query.keyWord
    }
    queryParams.value.pageNo=1
    getDetails()
})

const getDetails = () => {
    if (!dataStatus.value || loading.value) return
    loading.value = true
     
    if (routeData.value === 'Recommended') {
          themeStore.searcShow.inputValue = '' 
        
        // 推荐
        useHttp.get(`/web/index/recommendPicList`).then(res => {
            loading.value = false
            list.value.push(...res.result.records)
            if (res.result.records.length < queryParams.value.pageSize) {
                dataStatus.value = false
            }
        })

    } else if (routeData.value === 'search') {

        // 搜索
        useHttp.get('/web/index/picList', queryParams.value).then((res) => {
       
            loading.value = false
            list.value.push(...res.result.records)
            if (res.result.records.length < queryParams.value.pageSize) {
                dataStatus.value = false
            }
        })
    } else {
        themeStore.searcShow.inputValue = '' 
        // 关注
        useHttp.get(`/web/index/myIndexConcernList`).then(res => {
            loading.value = false
            list.value.push(...res.result.records)
            if (res.result.records.length < queryParams.value.pageSize) {
                dataStatus.value = false
            }
        })

    }
}

// 搜索
const setupWatcher = () => {

    queryParams.value.keyWord = getSearchText()
    list.value = []
    queryParams.value.pageNo = 1
    routeData.value = 'search'
    dataStatus.value = true
    getDetails()
    // useHttp.get('/web/index/picList', queryParams.value).then((res) => {
    //     loading.value = false
    //     list.value.push(...res.result.records)
    //     if (res.result.records.length < queryParams.value.pageSize) {
    //         dataStatus.value = false
    //     }
    // })
}

// 加载数据
const loadData = () => {
    if (list.value.length === 0) return
    queryParams.value.pageNo += 1
    getDetails()
}

// 素材
const openEdit = (item, index) => {
    UploadWorksRef.value.edit(item, index)
}

const editOk = (e) => {
    WaterfallRef.value.changeData(e)
}

const delOk = (e) => {
    WaterfallRef.value.delData(e)
}




</script>

<style lang="less" scoped></style>